
<template>
  <div class="dashboard-container">
    <el-drawer ref="drawer" size="1150px" :title="status==1?'新增':'编辑'" :visible.sync="showDialog" :wrapper-closable="true" @close="close">
      <div class="detial">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm">
          <el-row :gutter="10">
            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12"><div class="grid-content bg-purple" />
              <el-form-item label="价格模版名称:" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入模版名称" />
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12"><div class="grid-content bg-purple" />
              <el-form-item label="结算币种:" prop="currency">
                <el-select
                  v-model="ruleForm.currency"
                  style="width:100%"
                  placeholder="请选择结算币种"
                >
                  <el-option
                    label="人民币"
                    value="RMB"
                  />
                  <el-option
                    label="韩币"
                    value="KRW"
                  />
                  <el-option
                    label="美元"
                    value="USD"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24"><div class="grid-content bg-purple" />
              <el-form-item label="备注:" prop="desc">
                <el-input v-model="ruleForm.desc" type="textarea" placeholder="备注" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24"><div class="grid-content bg-purple" />
              <el-form-item label="产品要素:" prop="storage">
                <!-- <el-select
                  v-model="ruleForm.storage"
                  style="margin-right:10px;width:15%"
                  placeholder="仓储类型"
                  clearable
                >
                  <el-option
                    label="仓储"
                    :value="1"
                  />
                  <el-option
                    label="非仓储"
                    :value="2"
                  />
                </el-select> -->
                <el-select
                  v-model="ruleForm.brand"
                  style="margin-right:10px;width:15.6%"
                  placeholder="货物类型"
                  clearable
                >
                  <el-option
                    v-for="(item,index) in goodsTypeList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
                <el-select
                  v-model="ruleForm.courier_id"
                  style="margin-right:10px;width:15.6%"
                  placeholder="快递公司"
                  clearable
                >
                  <el-option
                    v-for="(item,index) in expressList"
                    :key="index"
                    :label="item.company_name"
                    :value="item.id"
                  />
                </el-select>
                <!-- <el-select
                  v-model="ruleForm.transport"
                  style="margin-right:10px;width:15.6%"
                  placeholder="走件方式"
                  clearable
                >
                  <el-option
                    label="上门揽收"
                    :value="1"
                  />
                  <el-option
                    label="自送货物"
                    :value="2"
                  />
                </el-select> -->
                <el-select
                  v-model="ruleForm.port"
                  style="margin-right:10px;width:15.6%"
                  placeholder="口岸"
                  clearable
                >
                  <el-option
                    v-for="(item,index) in postList"
                    :key="index"
                    :label="item.port_name"
                    :value="item.code"
                  />
                </el-select>
                <el-select
                  v-model="ruleForm.cargoes"
                  style="margin-right:10px;width:15.6%"
                  placeholder="大小件"
                  clearable
                >
                  <el-option
                    label="小件"
                    :value="1"
                  />
                  <el-option
                    label="大件"
                    :value="2"
                  />
                </el-select>
              </el-form-item>
              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                <el-form-item label="国内运费:" prop="home_freight">
                  <el-input v-model="ruleForm.home_freight" placeholder="请输入国内运费" />
                </el-form-item>
              </el-col>
              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                <el-form-item label="面单费:" prop="sheet_freight">
                  <el-input v-model="ruleForm.sheet_freight" placeholder="请输入面单费" />
                </el-form-item>
              </el-col>
              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                <el-form-item label="派送费:" prop="delivery_freight">
                  <el-input v-model="ruleForm.delivery_freight" placeholder="请输入派送费" />
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24"><div class="grid-content bg-purple" />
              <el-form-item label="状态:" prop="status">
                <el-switch
                  v-model="ruleForm.status"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="启用"
                  inactive-text="禁用"
                  :active-value="1"
                  :inactive-value="2"
                />
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
        <div style="display:flex">
          <el-button
            size="mini"
            style="margin-bottom:10px"
            type="primary"
            @click="addGoods()"
          >
            添加一行
          </el-button>
          <span style="margin-left:10px;font-size:14px">在此添加重量区间以及所对应的首续重价格 <span style="color:red">(注意:内蒙古自治区,海南省,青海省,甘肃省,新疆维吾尔自治区,西藏自治区,宁夏回族自治区,香港特别行政区,澳门特别行政区,台湾默认取消,如需单独配置请手动添加)</span> </span>
        </div>

        <el-table
          ref="multipleTable"
          :data="ruleForm.detail"
          style="width: 100%;"
          size="mini"
          border
          tooltip-effect="dark"
          :header-cell-style="{ background: '#eaf1fd', color: '#333' }"
        >
          <el-table-column
            label="重量区间(kg)"
            prop="title"
            width="200px"
          >
            <template slot-scope="{ row }">
              <div>
                <el-input v-model="row.weight_min" style="width:80px" placeholder="重量" />
                ~
                <el-input v-model="row.weight_max" style="width:80px" placeholder="重量" />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="首重(kg)"
            prop="title"
            width="100px"
          >
            <template slot-scope="{ row }">
              <div>
                <el-input v-model="row.first_weight" style="width:80px" placeholder="重量" />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="首重价格"
            prop="title"
            width="100px"
          >
            <template slot-scope="{ row }">
              <div>
                <el-input v-model="row.first_value" style="width:80px" placeholder="价格" />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="续重(kg)"
            prop="title"
            width="100px"
          >
            <template slot-scope="{ row }">
              <div>
                <el-input v-model="row.next_weight" style="width:80px" placeholder="重量" />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="续重价格"
            prop="title"
            width="100px"
          >
            <template slot-scope="{ row }">
              <div>
                <el-input v-model="row.next_value" style="width:80px" placeholder="价格" />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="产品类型"
            prop="title"
            width="120px"
          >
            <template slot-scope="{ row }">
              <div>
                <el-select
                  v-model="row.type"
                  clearable
                  style="width:100px"
                  placeholder="产品类型"
                >
                  <el-option
                    label="标快"
                    :value="1"
                  />
                  <el-option
                    label="特快"
                    :value="2"
                  />
                </el-select>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="收货区域"
            prop="title"
            width="250px"
          >
            <template slot-scope="{ row }">
              <div>
                <el-select
                  v-model="row.area"
                  multiple
                  filterable
                  placeholder="收货区域"
                  style="width:100%"
                  collapse-tags
                >
                  <el-option
                    v-for="(item,index) in cityList"
                    :key="index"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            prop="title"
          >
            <template slot-scope="{ $index }">
              <div>
                <el-button
                  size="mini"
                  type="danger"
                  @click="delet($index)"
                >
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

      </div>

      <div class="buttons">
        <el-button
          v-if="status == 1"
          size="mini"
          type="primary"
          style="margin-left:20px"
          @click="addNews()"
        >
          新 增
        </el-button>
        <el-button
          v-if="status == 2"
          size="mini"
          type="primary"
          style="margin-left:20px"
          @click="editNews()"
        >
          保 存
        </el-button>
        <el-button
          size="mini"
          type=""
          @click="close()"
        >
          取消
        </el-button>

      </div>

    </el-drawer>
  </div>
</template>

<script>
import { getCity, createFreight, updateFreight } from '@/api/vocational/price'
import { listCourierNo } from '@/api/base/express'
import { listGoodsType } from '@/api/base/goods'
import { listPort } from '@/api/base/port'
export default {
  name: 'Detial',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    detial: {
      require: false,
      type: Object,
      default: () => {

      }
    },
    status: {
      type: Number,
      default: 1
    }
  },
  data() {
    var validateGoods = (rule, value, callback) => {
      if (!this.ruleForm.brand || !this.ruleForm.port || !this.ruleForm.cargoes) {
        callback(new Error('请补全产品要素'))
      }
    }
    return {
      checkAll: false,
      showDialog: false,
      codes: [],
      expressList: [],
      goodsTypeList: [],
      postList: [],
      cityList: [],
      defultList: [],
      ruleForm: {
        'name': '',
        'currency': '',
        'desc': '',
        'storage': '',
        'brand': '',
        'courier_id': '',
        'transport': '',
        'port': '',
        'cargoes': '',
        'home_freight': '',
        'delivery_freight': '',
        'sheet_freight': '',
        'status': 1,
        'detail': [{
          'weight_min': '',
          'weight_max': '',
          'first_weight': '',
          'first_value': '',
          'next_weight': '',
          'next_value': '',
          'type': '',
          'area': ''
        }]
      },
      rules: {
        name: [
          { required: true, message: '请输入渠道名称', trigger: 'blur' }
        ],
        currency: [
          { required: true, message: '请选择结算币种' }
        ],
        cheackGoods: [
          { validator: validateGoods, message: '请补全产品要素' }
        ]
      }
    }
  },
  watch: {
    visible(val) {
      this.showDialog = this.visible
      if (!this.showDialog) {
        this.resetForm()
      } else {
        this.codes = []
        if (this.status === 2) {
          this.detial.storage = this.changeZero(this.detial.storage)
          this.detial.brand = this.changeZero(this.detial.brand)
          this.detial.courier_id = this.changeZero(this.detial.courier_id)
          this.detial.transport = this.changeZero(this.detial.transport)
          this.detial.port = this.changeZero(this.detial.port)
          this.detial.cargoes = this.changeZero(this.detial.cargoes)

          Object.keys(this.ruleForm).forEach(i => {
            this.ruleForm[i] = this.detial[i]
          })
          this.ruleForm.id = this.detial.id
          this.ruleForm.detail = this.detial.freight_detail
          this.ruleForm.detail.forEach(item => {
            if (item.type === 0) item.type = ''
            if (item.area) {
              item.area = item.area.split(',')
            }
          })
        } else {
          this.ruleForm.detail[0].area = [...this.defultList]
        }
      }
    }
  },
  mounted() {
    // 快递公司
    this.getExpressCode()
    // 货物类型
    this.getListGoodsType()
    // 口岸
    this.getportType()
    // 省
    this.getCityList()
  },
  methods: {
    changeZero(data) {
      if (data === 0) {
        return ''
      } else {
        return data
      }
    },
    addGoods() {
      this.ruleForm.detail.push({
        'weight_min': '',
        'weight_max': '',
        'first_weight': '',
        'first_value': '',
        'next_weight': '',
        'next_value': '',
        'type': '',
        'area': [...this.defultList]
      })
    },
    delet(index) {
      this.ruleForm.detail.splice(index, 1)
    },
    getExpressCode() {
      listCourierNo({}).then(res => {
        this.expressList = res.data
      })
    },
    getListGoodsType() {
      listGoodsType({
        limit: 10000,
        status: 1
      }).then(res => {
        this.goodsTypeList = res.data.data
      })
    },
    getportType() {
      listPort({
        limit: 1000,
        status: 1
      }).then(res => {
        this.postList = res.data.data
      })
    },
    getCityList() {
      getCity({
      }).then(res => {
        this.cityList = res.data
        this.cityList.forEach(i => {
          if (i.selected) {
            this.defultList.push(i.name)
          }
        })
      })
    },
    close() {
      this.$emit('update', false)
    },
    resetForm() {
      this.$refs['ruleForm'].resetFields()
      this.ruleForm = {
        'name': '',
        'currency': '',
        'desc': '',
        'storage': '',
        'brand': '',
        'courier_id': '',
        'transport': '',
        'port': '',
        'cargoes': '',
        'home_freight': '',
        'delivery_freight': '',
        'sheet_freight': '',
        'status': 1,
        'detail': [{
          'weight_min': '',
          'weight_max': '',
          'first_weight': '',
          'first_value': '',
          'next_weight': '',
          'next_value': '',
          'type': '',
          'area': ''
        }]
      }
    },
    addNews() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          const param = { ...this.ruleForm }
          param.detail.forEach(item => {
            item.area = item.area.toString()
          })
          createFreight(param).then(res => {
            this.$message.success('添加成功')
            this.$emit('reload')
          })
        } else {
          return false
        }
      })
    },
    editNews() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          const param = { ...this.ruleForm }
          param.detail.forEach(item => {
            item.area = item.area.toString()
          })

          updateFreight(param).then(res => {
            this.$message.success('编辑成功')
            this.$emit('reload')
          })
        } else {
          return false
        }
      })
    }

  }

}
</script>
<style scoped>
.detial{
  padding:40px 40px 20px 20px;
  height: calc(100vh - 80px);
  overflow: auto;
}
.buttons{
  display: flex;
  flex-direction: row-reverse;
  padding-right: 40px;
}
.other-freight{
  display: flex;
}
</style>
